<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <panel-group :statistics="model" />
      <div class="chart-wrapper">
        <bar-chart :statistics="model" />
      </div>
      <div id="dis-table" class="dis-table-wrap">
        <div class="dis-title">网关状态</div>
        <table class="dis-table">
          <tr>
            <th>省市区</th>
            <td>
              {{ model.province || '' }}
              {{ model.city || '' }}
              {{ model.region || '' }}
            </td>
            <th>详细位置</th>
            <td>{{ model.detailAddress }}</td>
            <th>联系方式</th>
            <td>{{ model.contact }}</td>
          </tr>
          <tr>
            <th>公司名称</th>
            <td>{{ model.company }}</td>
            <th>网关编码</th>
            <td>{{ model.deviceCode }}</td>
            <th>网关SN</th>
            <td>{{ model.sn }}</td>
          </tr>
          <tr>
            <th>网管地址</th>
            <td>{{ model.managerIp }}</td>
            <th>网管连接状态</th>
            <td>
              <span v-if="model.managerConnectionStatus===0">未配置</span>
              <span v-if="model.managerConnectionStatus===1">已连接</span>
              <span v-if="model.managerConnectionStatus===2">已断开</span>
            </td>
            <th>网关状态</th>
            <td>
              <span v-if="model.status===0">未知</span>
              <span v-if="model.status===1">运行中</span>
              <span v-if="model.status===2">故障</span>
              <span v-if="model.status===3">已停用</span>
              <span v-if="model.status===4">备机启用中</span>
              <span v-if="model.status===5">备机备用中</span>
            </td>
          </tr>
          <tr>
            <th>配置端口</th>
            <td>{{ model.configConsoleConnected?'已连接':'已断开' }}</td>
            <th>配置应用状态</th>
            <td>
              <span v-if="model.configApplyStatus===0">未配置</span>
              <span v-if="model.configApplyStatus===1">未应用</span>
              <span v-if="model.configApplyStatus===2">已应用</span>
              <span v-if="model.configApplyStatus===3">应用中</span>
              <span v-if="model.configApplyStatus===4">应用失败</span>
            </td>
            <th>配置同步状态</th>
            <td>
              <span v-if="model.configSyncStatus===0">未配置</span>
              <span v-if="model.configSyncStatus===1">未同步</span>
              <span v-if="model.configSyncStatus===2">已同步</span>
              <span v-if="model.configSyncStatus===3">同步中</span>
              <span v-if="model.configSyncStatus===4">同步失败</span>
            </td>
          </tr>
          <tr>
            <!-- <th>创建时间</th>
            <td>{{ model.creationTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</td> -->
            <th>状态更新时间</th>
            <td colspan="5">{{ model.latUpdateTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</td>
          </tr>
        </table>
      </div>
      <div class="dis-table-wrap">
        <div class="dis-title">通道状态</div>
        <el-table
          :key="tableKey"
          :data="model.ports"
          class="trans-table"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="通道ID" prop="id" align="center" width="70"></el-table-column>
          <el-table-column label="通道名" prop="name" align="center" min-width="90"></el-table-column>
          <el-table-column label="配置数据源数" align="center" prop="equipCNum" min-width="90"></el-table-column>
          <el-table-column label="应用数据源数" align="center" prop="equipNum" min-width="90"></el-table-column>
          <el-table-column label="配置数据点数" align="center" prop="deCNum" min-width="90"></el-table-column>
          <el-table-column label="应用数据点数" align="center" prop="deNum" min-width="90"></el-table-column>
          <el-table-column label="活跃数据点数" align="center" prop="deActNum" min-width="90"></el-table-column>
          <el-table-column label="端口状态" align="center" min-width="90">
            <template slot-scope="{row}">
              {{ transStatus(row.status) }}
            </template>
          </el-table-column>
          <el-table-column label="服务状态" align="center" min-width="90">
            <template slot-scope="{row}">
              {{ transDataStatus(row.dataStatus) }}
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
  </div>
</template>

<script>
  import { getStatistics } from "@/api/gateway";
  import PanelGroup from "./components/PanelGroup";
  import BarChart from "./components/BarChart";

  export default {
    name: "Dashboard",
    components: {
      PanelGroup,
      BarChart
    },
    data() {
      return {
        isSubmitLoading: false,
        tableKey: 0,
        model: {},
        timer: undefined
      };
    },
    created() {
      this.load();
    },
    destroyed() {
      clearInterval(this.timer);
    },
    methods: {
      load() {
        this.getList();
        this.setInterval();
      },
      setInterval() {
        this.timer = setInterval(() => {
          this.getList();
        }, 5000);
      },
      getList() {
        this.isSubmitLoading = true;
        getStatistics().then(result => {
          this.model = result;
          this.isSubmitLoading = false;
        });
      },
      transStatus(status) {
        let returnVal = '';
        switch (status) {
          case 0:
            returnVal = '未配置';
            break;
          case 1:
            returnVal = '运行中';
            break;
          case 2:
            returnVal = '运行检测失败';
            break;
          case 3:
            returnVal = '已停止';
            break;
          case 4:
            returnVal = '启动失败';
            break;
          case 5:
            returnVal = '等待中';
            break;
          case 6:
            returnVal = '启动中';
            break;
          case 7:
            returnVal = '停止中';
            break;
          case 8:
            returnVal = '停止失败';
            break;
        }
        return returnVal;
      },
      transDataStatus(status) {
        let returnVal = '';
        switch (status) {
          case 0:
            returnVal = '正常';
            break;
          case 1:
            returnVal = '无物理端口';
            break;
          case 2:
            returnVal = '无数据源';
            break;
          case 4:
            returnVal = '无数据点';
            break;
          case 8:
            returnVal = '无本地串口地址(COM)/本地IP地址(TCP)';
            break;
          case 16:
            returnVal = '无本地端口(TCP)';
            break;
          case 32:
            returnVal = '本地串口地址无效(COM)/本地IP地址无效(TCP)';
            break;
          case 64:
            returnVal = '数据读取超时';
            break;
        }
        return returnVal;
      }
    }
  };
</script>
<style lang="scss">
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px;
      margin-bottom: 32px;
    }
  }

  .dis-table-wrap {
    padding: 0 30px 30px;
    background-color: #fff;

    & + .dis-table-wrap {
      margin-top: 32px;
    }
  }

  .dis-title {
    display: flex;
    padding: 20px 0;
    font-weight: bold;

    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background-color: #409EFF;
      margin-right: 10px;
    }
  }

  .dis-table {
    width: 100%;
    border-collapse: collapse;

    tr {
      th {
        width: 140px;
        font-size: 14px;
        text-align: left;
        background: #eef1f6;
      }

      td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
        color: #606266;
      }

      th, td {
        border: 1px solid #dfe6ec;
        padding: 8px;
        vertical-align: middle;
      }
    }
  }

  .trans-table {
    tr {
      th {
        background: #eef1f6;
        color: #000000;
      }
    }
  }

</style>
